<template>
  <div>
    <header class="header">
      <i class=" iconfont icon-iconfontjiantouzuo"></i>
      <h2 class="ellipsis">家居家装年货节</h2>
      <i class="iconfont icon-sandian-copy"></i>
    </header>
    <div class="img">
      <a v-for="(v,i) in img" :key="i" :href="v.hr">
        <img :src="v.img" alt="">
      </a>
    </div>
    <div class="datu">
      <img src="https://gfs10.gomein.net.cn/T1nOWgB7KT1RCvBVdK.jpg" alt="">
      <img src="https://gfs11.gomein.net.cn/T1W9hgB5WT1RCvBVdK.jpg" alt="">
      <img src="https://gfs5.gomein.net.cn/T1GXbgB7DT1RCvBVdK.jpg" alt="">
    </div>
    <div class="max">
      <ul class="ul">
        <li>10:00场</li>
        <li>16:00场</li>
      </ul>

      <div class="left">
        <h3 class="kong"></h3>
        <div class="img" v-for="(v,i) in zuo" :key="i">
          <div class="zuo">
            <img :src="v.img">
          </div>

          <ul>
            <li>{{v.one}}</li>
            <li>{{v.two}}</li>
            <li>
              <span class="q">{{v.sp}}</span>
              <span class="j">{{v.sp1}}</span>
            </li>
            <li>
              <p class="qian">
                {{v.qian}}
              </p>
              <p class="g"> {{v.g}} </p>
            </li>
          </ul>
        </div>

        <div class="shangli">
          <img src="https://gfs11.gomein.net.cn/T1mhVgB5DT1RCvBVdK.webp" alt="">

          <ul>
            <li v-for="(v,i) in img1" :key="i">
              <img :src="v" alt="">
            </li>
          </ul>
          <img src="https://gfs11.gomein.net.cn/T1wxEjB7DT1RCvBVdK.webp" alt="">
          <img src="https://gfs6.gomein.net.cn/T14thgB5ET1RCvBVdK.webp" alt="">
          <ul>
            <li v-for="(v,i) in img2" :key="i">
              <img :src="v" alt="">
            </li>
          </ul>
          <img src="https://gfs13.gomein.net.cn/T1HHAjBmZT1RCvBVdK.webp" alt="">
        </div>

        <div class="chuju">
          <div class="jiaju" v-for=" div in 11" >
            <img src="//gfs17.gomein.net.cn/T1aLKvBg_g1RCvBVdK_360.webp" alt="">
            <ul>
              <li>苏泊尔无油烟不粘锅三件套</li>
              <li>无油烟不粘 易清洗</li>
              <li>￥239</li>
            </ul>
            <div class="btn">
              <button data-code="4179125-1">立即购买</button>
            </div>

          </div>

        </div>

      </div>
    </div>
  </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      img: [
        {
          hr:
            "https://prom.m.gome.com.cn/html/prodhtml/topics/201801/5/saleWRzxPbOjSPr.html",
          img: "https://gfs12.gomein.net.cn/T1NzJgB7KT1RCvBVdK.jpg"
        },
        {
          hr:
            "https://prom.m.gome.com.cn/html/prodhtml/topics/201801/5/saleWRzxPbOjSPr.html",
          img: "https://gfs10.gomein.net.cn/T1OQCgB7LT1RCvBVdK.jpg"
        },
        {
          hr:
            "https://prom.m.gome.com.cn/html/prodhtml/topics/201801/5/saleWRzxPbOjSPr.html",
          img: "https://gfs10.gomein.net.cn/T1qgbjBKET1RCvBVdK.jpg"
        },
        {
          hr:
            "https://prom.m.gome.com.cn/html/prodhtml/topics/201801/5/saleWRzxPbOjSPr.html",
          img: "https://gfs12.gomein.net.cn/T192EgB7CT1RCvBVdK.jpg"
        },
        {
          hr:
            "https://prom.m.gome.com.cn/html/prodhtml/topics/201801/5/saleWRzxPbOjSPr.html",
          img: "https://gfs13.gomein.net.cn/T1zNbjB7ZT1RCvBVdK.jpg"
        },
        {
          hr:
            "https://prom.m.gome.com.cn/html/prodhtml/topics/201801/5/saleWRzxPbOjSPr.html",
          img: "https://gfs11.gomein.net.cn/T1B4AjB7AT1RCvBVdK.jpg"
        }
      ],
      zuo: [
        {
          img: "//gfs17.gomein.net.cn/T1ROdvB7_v1RCvBVdK_360.webp",
          one: "南极人 磨毛压花枕",
          two: "亲肤面料-优质填充",
          sp: "抢购",
          sp1: "距结束",
          qian: "￥9.9",
          g: "已抢光"
        },
        {
          img: "//gfs17.gomein.net.cn/T1ROdvB7_v1RCvBVdK_360.webp",
          one: "南极人 磨毛压花枕",
          two: "亲肤面料-优质填充",
          sp: "抢购",
          sp1: "距结束",
          qian: "￥9.9",
          g: "已抢光"
        },
        {
          img: "//gfs17.gomein.net.cn/T1ROdvB7_v1RCvBVdK_360.webp",
          one: "南极人 磨毛压花枕",
          two: "亲肤面料-优质填充",
          sp: "抢购",
          sp1: "距结束",
          qian: "￥9.9",
          g: "已抢光"
        },
        {
          img: "//gfs17.gomein.net.cn/T1ROdvB7_v1RCvBVdK_360.webp",
          one: "南极人 磨毛压花枕",
          two: "亲肤面料-优质填充",
          sp: "抢购",
          sp1: "距结束",
          qian: "￥9.9",
          g: "已抢光"
        },
        {
          img: "//gfs17.gomein.net.cn/T1ROdvB7_v1RCvBVdK_360.webp",
          one: "南极人 磨毛压花枕",
          two: "亲肤面料-优质填充",
          sp: "抢购",
          sp1: "距结束",
          qian: "￥9.9",
          g: "已抢光"
        }
      ],
      img1: [
        "https://gfs10.gomein.net.cn/T12bVjBXKT1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T1w1AgBCVT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T17FAgB5DT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T1X9J_BXbT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T15zAgB5DT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T1YMDbB5LT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1DqLjB5hT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T1f2AgB7YT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1jEZbB4VT1RCvBVdK.webp",
        "https://gfs12.gomein.net.cn/T1Wf_gB7DT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1WJZgB5xT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1c8EjBKYT1RCvBVdK.webp"
      ],
      img2: [
        "https://gfs12.gomein.net.cn/T1KmA_BKxT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1PAJgBKCT1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T1Vw__BKYT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1C9bbBKYT1RCvBVdK.webp",
        "https://gfs12.gomein.net.cn/T1U_WjBKdT1RCvBVdK.webp",
        "https://gfs12.gomein.net.cn/T1Vr_gBKET1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T11oVjBKJT1RCvBVdK.webp",
        "https://gfs12.gomein.net.cn/T13GC_BQKT1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T1IcL_BKxT1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T1mVWgBKxT1RCvBVdK.webp",
        "https://gfs12.gomein.net.cn/T1DnE_B4CT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T1cRdgBKdT1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T14JEgB7LT1RCvBVdK.webp",
        "https://gfs10.gomein.net.cn/T18CbQBvDT1RCvBVdK.webp",
        "https://gfs11.gomein.net.cn/T1BQbgBvZT1RCvBVdK.webp",
        "https://gfs13.gomein.net.cn/T1itdgBjZT1RCvBVdK.webp"
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.header {
  .px2rem(height,100);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  i {
    width: 20%;
    .px2rem(font-size,40);
  }
  .ellipsis {
    width: 60%;
  }
}
.img {
  display: flex;
  width: 100%;
  a {
    flex: 1;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.datu {
  img {
    width: 100%;
  }
}

.max {
  margin-bottom: 200px;
  .ul {
    display: flex;
    justify-content: space-between;
    .px2rem(height,100);
    background: orange;
    li {
      flex: 1;
      .px2rem(line-height,100);
      text-align: center;
    }
    &.active {
      border-bottom: 2px solid red;
      box-sizing: border-box;
    }
  }
  .left {
    .kong {
      .px2rem(height,30);
    }
    background: rgb(219, 48, 40);
    .img {
      width: 95%;
      background: #ffffff;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      .zuo {
        width: 40%;
        img {
          width: 100%;
        }
      }
      ul {
        width: 60%;
        li {
          .px2rem(padding-left,30);
        }
        li:nth-child(1) {
          .px2rem(font-size,30);
          .px2rem(padding-left,30);
          .px2rem(padding-top,30);
        }
        li:nth-child(2) {
          .px2rem(font-size,30);
          color: red;
          .px2rem(padding-top,50);
        }
        li:nth-child(3) {
          .px2rem(padding-top,35);
          .q {
            background: orangered;
            color: red;
            .px2rem(font-size,30);
          }
          .j {
            .px2rem(font-size,26);
          }
        }
        li:nth-child(4) {
          display: flex;
          justify-content: space-between;
          .px2rem(padding-top, 25);
          .qian {
            .px2rem(font-size,30);
            color: red;
            font-weight: bolder;
          }
          .g {
            .px2rem(width,100);
            .px2rem(height,50);
            text-align: center;
            .px2rem(line-height,50);
            margin-right: 10%;
            background: rgb(255, 92, 92);
            border-radius: 20px;
          }
        }
      }
    }
    .shangli {
      img {
        width: 100%;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 50%;
          img {
            width: 100%;
          }
        }
      }
    }

    .chuju {
      width: 94%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .jiaju {
        background: #fff;
        width: 48%;
        margin-top: 10px;
        img {
          width: 100%;
        }
        ul {
          width: 100%;
          li {
            .px2rem(padding-left,10);
          }
          li:nth-child(1) {
            .px2rem(font-size,32);
          }
          li:nth-child(2) {
            .px2rem(font-size,30);
            .px2rem(padding-top,30);
            color: red;
          }
          li:nth-child(3) {
            .px2rem(font-size,30);
            .px2rem(padding-top,30);
            color: red;
          }
        }
        .btn {
          width: 100%;
          button {
            width: 80%;
            .px2rem(height,80);
            margin: 0 auto;
            text-align: center;
            border-radius: 50px;
            outline: none;
            background:  rgb(219, 48, 40);
          }
        }
      }
    }
  }
}
</style>
